<template>
  <div id="first">
    <div class="fir_title">
      First Page
      河南大学
    </div>
    <div class="fir_nav">
      <button v-on:click='switchPage("first")'>FirCom-1</button>
      <button v-on:click='switchPage("second")'>FirCom-2</button>
    </div>
    <div class="fir_con">
      <component :is="curPage"></component>
    </div>
  </div>
</template>
<script>
import FirstCom from "./component/FirstCom.vue";
// import SecondCom from "./component/SecondCom.vue";
// const FirstCom = ()=>import(/* webpackChunkName:'FirstCom' */"./component/FirstCom")
// const SecondCom = ()=>import(/* webpackChunkName:'SecondCom' */"./component/SecondCom")
export default {
  name: "LayComponent",
  data() {
    return {
      curPage: 'FirstCom'
    }
  },
  components: {
    // FirstCom,
    // SecondCom
    // FirstCom: resolve => require(['./component/FirstCom'], resolve),
    // SecondCom: resolve => require(['./component/SecondCom'], resolve),
    FirstCom,//方式1
    SecondCom:(resolve)=>require (['./component/SecondCom'],resolve),//方式2
  },
  methods: {
    switchPage: function(page){
      switch(page){
        case 'first':{
          this.curPage = 'FirstCom';
          break;
        }
        case 'second':{
            import("./component/SecondCom")
            .then((res) => {
              this.curPage = res.default;
            })
          
          break;
        }
      }
    }
  },
  computed:{
    // 借助计算属性
    getCom: function(){
      return this.curPage;
    }
  }
};
</script>

<style>
.home-title {
  color: deeppink;
  font-size: 30px;
}
</style>
